<template>
  <div>
    <div class="body">
      <el-select v-model="selectValue" :disabled="disabled" clearable placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
import api from '@/api'

export default {
  name: 'select-dict',
  components: {
  },
  props: {
    value: {
      type: Object // 传对象简单,不需要传额外的事件.只要指定对象value的key(valueKey)
    },
    valueKey: {
      type: String
    },
    dictType: {
      type: String
    },
    disabled: {
      type: Boolean
    }
  },
  data () {
    return {
      options: [],
      selectValue: ''
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      var param = { type: this.dictType }
      api.sysDict.getListByType(param).then(res => {
        res.forEach(m => {
          var op = {}
          op.key = m.code
          op.value = m.code
          op.label = m.displayName
          this.options.push(op)
        })
        this.selectValue = this.value[this.valueKey]
      })
    }
  },
  watch: {
    selectValue () {
      this.value[this.valueKey] = this.selectValue
    }
  }
}
</script>

<style lang="scss">
  .body {
    padding: 8px;
  }
</style>
